<template>
	<v-app>
		<v-app-bar app color="white" flat style="height:100px;">
			<v-row height="65px" style="margin-top:19px;">
				<v-col cols="6">
					<!-- <v-img   width="300px" :src="require('../../../assets/cloudlink.png')"> -->
					<v-img   width="300px" :src="require('../../../assets/logo2.png')">
					</v-img>
				</v-col>
			</v-row>
		</v-app-bar>

		<v-main style="background-color: #f5f7fa !important">
			<v-container fill-height style="opacity: 0.9">
				<v-row justify="space-around" align-content="space-around" align="center" style="">
					<v-col lg="6" class="d-none d-lg-flex d-xl-flex">
						<v-img max-height="550" width="900" :src="require('../../../assets/background_login.jpg')"
							style="margin-top: -30px"></v-img>
					</v-col>

					<v-col lg="4" md="8">
						<v-card>
							<v-tabs background-color="white accent-2" center-active light grow height="60px">
								<v-tab>
									<h3>登录</h3>
								</v-tab>
								<v-tab>
									<h3>注册</h3>
								</v-tab>

								<v-tab-item>
									<v-container class="mt-10">
										<v-form ref="form" v-model="valid" :lazy-validation="true">
											<v-row justify="center" class="mb-n8 d-flex" align-content="center">
												<v-col cols="11" style="margin: 0 auto">
													<v-text-field clearable outlined prepend-inner-icon="mdi-account"
														placeholder="请输入登录名" :rules="rules.oldPass"
														v-model="form.username" required></v-text-field>
												</v-col>
											</v-row>

											<v-row justify="center" class="mb-n8">
												<v-col cols="11">
													<v-text-field clearable outlined placeholder="请输入密码" type="password"
														:rules="rules.newPss" v-model="form.password" required
														prepend-inner-icon="mdi-lock"></v-text-field>
												</v-col>
											</v-row>

											<v-row justify="center" class="mb-n8">
												<v-col cols="11">
													<v-select clearable outlined required v-model="form.accountingbookcode"
														:items="accountBookSelectList" label="账套">
													</v-select>

													<!-- <v-col cols="8">
                          <v-text-field
                            outlined
                            placeholder="验证码"
                            required
                            prepend-inner-icon="mdi-shield-account"
                            :rules="rules.verifPss"
                            v-model="form.verificationcode"
                          ></v-text-field> -->
												</v-col>

											<!-- 	<v-col cols="3">
													<v-img contain :src="
                              require('../../../assets/verificationCode.jpg')
                            " height="50px" width=""></v-img>
												</v-col> -->
											</v-row>
										</v-form>
										<v-row justify="center" class="mt-7 mb-1">
											<v-col cols="11">
												<v-btn block color="#196bb3" height="40px" :disabled="!valid"
													@click="submit">确认</v-btn>
											</v-col>
										</v-row>
									</v-container>
								</v-tab-item>
								<v-tab-item>
									<v-container class="mt-10">
										<v-form ref="form" v-model="valid" :lazy-validation="true">
											<v-row justify="center" class="mb-n8">
												<v-col cols="11">
													<v-text-field clearable outlined prepend-inner-icon="mdi-account"
														placeholder="请输入用户名" :rules="rules.userPss"
														v-model="form.register_username" required></v-text-field>
												</v-col>
											</v-row>

											<v-row justify="center" class="mb-n8">
												<v-col cols="11">
													<v-text-field clearable outlined placeholder="请输入密码" type="password"
														:rules="rules.passwordPss" v-model="form.register_password"
														required prepend-inner-icon="mdi-lock"></v-text-field>
												</v-col>
											</v-row>

											<v-row justify="center" class="mb-n8">
												<v-col cols="11">
													<v-text-field clearable outlined placeholder="请再次输入密码"
														type="password" :rules="rules.repasswordPss"
														v-model="form.register_repassword" required
														prepend-inner-icon="mdi-lock"></v-text-field>
												</v-col>
											</v-row>

											<v-row justify="center" class="mb-n8">
												<v-col cols="11">
													<v-text-field outlined clearable placeholder="请输入邮箱账号" required
														prepend-inner-icon="email" :rules="rules.emailPss"
														v-model="form.register_email">
													</v-text-field>
												</v-col>
											</v-row>
										</v-form>
										<v-row justify="center" class="mt-7 mb-8">
											<v-col cols="11">
												<v-btn block color="#196bb3" height="40px" :disabled="!valid"
													@click="signUp">确认</v-btn>
											</v-col>
										</v-row>
									</v-container>
								</v-tab-item>
							</v-tabs>
						</v-card>
					</v-col>
				</v-row>
			</v-container>
		</v-main>

		<v-footer padless>
			<v-col class="text-center" cols="12">
				<p>Copyright © 2021 TUNGRAY. All rights reserved 同日云联 版权所有</p>
			</v-col>
		</v-footer>
	</v-app>
</template>
<script>
	import {
		mapActions
	} from "vuex";
	export default {
		data: () => ({
			menuState: false,
			showList: true,
			dialog: false,
			logoutState: false,
			valid: true,
			padless: false,

			form: {
				username: "",
				password: "",
				verificationcode: "",
				register_username: "",
				register_password: "",
				register_repassword: "",
				register_email: "",
			},
			rules: {
				oldPass: [(v) => !!v || "账号不能为空"],
				newPss: [(v) => !!v || "密码不能为空"],
				verifPss: [(v) => !!v || "验证码不能为空"],
				userPss: [(v) => !!v || "用户名不能为空"],
				passwordPss: [(v) => !!v || "密码不能为空"],
				repasswordPss: [(v) => !!v || "重复密码不能为空"],
				emailPss: [(v) => !!v || "邮箱账号不能为空"],
			},

			show2: false,
			accountBookSelectList: []
		}),
		created() {
			this.loadAccountBookList()
		},
		methods: {
			...mapActions("admin/account", ["login"]),
			async loadAccountBookList() {
				var response = await this.$httpRequest({
					url: `Account/GetAccBooksToSelect`,
					method: 'get',
				})
				if (response.status == 1) {
					this.accountBookSelectList = response.data
				}
			},
			validate() {
				this.$refs.form.validate();
			},
			submit() {
				
				const res = this.$refs.form.validate();
				if (res) {
					this.login({
						username: this.form.username,
						password: this.form.password,
						accountingbookcode:this.form.accountingbookcode,
						verificationcode: this.form.verificationcode,
						register_username: this.form.register_username,
						register_password: this.form.register_password,
						register_repassword: this.form.register_repassword,
						register_email: this.form.register_email,
					}).then((result) => {
						// 重定向对象不存在则返回顶层路径
						if (result.flag)
							this.$router.replace(this.$route.query.redirect || "/");
						else this.$message.error(result.info);
					});
				}
			},

			signUp() {
				const res = this.$refs.form.validate();
				if (res) {
					this.login({
						register_username: this.form.register_username,
						register_password: this.form.register_password,
						register_repassword: this.form.register_repassword,
						register_email: this.form.register_email,
					}).then(() => {
						alert("提交成功");
					});
				}
			},
		},
	};
</script>

<style>
	.page {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100vw;
		height: 100vh;
		align-content: center;
		justify-content: center;
	}

	.background {
		background-repeat: "no-repeat";
		background-color: "#f5f7fa" !important;
	}
</style>
